import React, { useRef, useState, useMemo, useEffect } from 'react';
import { Row, Col, Drawer } from 'antd';
import styles from './index.less';
import offset from 'document-offset';
import H_Table from './components/H_Table';
import Draggable from 'react-draggable';
import Result from './components/Result';
import EmptyCenter from '@/components/EmptyCenter';
import MonitoringModal from './components/MonitoringModal';
import Connect from '@/components/Connect';
import useModel from './useModels/useModel';
import Toolbar from './components/Toolbar';
import { useUpdateEffect, useMouse, useSize } from 'ahooks';
import IssuedMessage from './components/IssuedMessage';
import AddModal from './components/AddModal';

// const RightDrawer = Connect(state => {
//   return {
//     resultVisible: state.resultVisible,
//   };
// }, useModel)(({ setState, children, resultVisible }) => {
//   const onClose = () => {
//     setState({
//       resultVisible: false,
//     });
//   };

//   return (
//     <Drawer
//       placement={'right'}
//       className={styles['drawer-wrap']}
//       destroyOnClose={true}
//       closable={false}
//       width={820}
//       onClose={onClose}
//       visible={resultVisible}
//     >
//       {children}
//     </Drawer>
//   );
// });
const ScaleBar = ({ onChange, initialRatio, height }) => {
  const ref = useRef();
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const onControlledDrag = (e, position) => {
    const { y } = position;
    onChange && onChange(y);
    setPosition({ x: 0, y });
  };
  return (
    <Draggable
      axis="y"
      bounds={{
        top: -(height * initialRatio),
        left: 0,
        right: 0,
        bottom: height * (1 - initialRatio),
      }}
      position={position}
      onDrag={onControlledDrag}
    >
      <div ref={ref} className={styles['scale-bar']} />
    </Draggable>
  );
};

const Grid = () => {
  const ref = useRef();
  const barRef = useRef();
  const size = useSize(ref);
  const initialRatio = 0.6;
  const [ratio, setRatio] = useState(initialRatio);
  const topHeightRatio = ratio;
  let scaleBarHeight = 6;
  let padingHeight = 6;
  const bottomHeightRatio = 1 - topHeightRatio;
  const height = size.height - padingHeight * 2 - scaleBarHeight;
  const topHeight = height * topHeightRatio;
  const bottomHeight = height * bottomHeightRatio;
  const onChange = y => {
    let currentRatio = (height * initialRatio + y) / height;
    setRatio(currentRatio);
  };
  return (
    <div className={styles['test-wrap']} id={'test-wrap'} ref={ref}>
      <div className={styles['top']} style={{ height: topHeight + 'px' }}>
        <div className={styles['list-wrap']}>
          <Toolbar />
          <H_Table />
        </div>
      </div>
      <ScaleBar onChange={onChange} height={height} initialRatio={initialRatio} />
      <div style={{ height: '6px', width: '100%' }}></div>
      <div className={styles['bottom']} style={{ height: bottomHeight + 'px' }}>
        <div className={styles['result-wrap']}>
          <IssuedMessage />
        </div>
      </div>
      {/* <RightDrawer>
        <Result />
      </RightDrawer> */}
      <MonitoringModal />
      <AddModal />
    </div>
  );
};
const Page = props => {
  return (
    <>
      {!localStorage.getItem('deviceType') && (
        <EmptyCenter description={'请先选择平台'} jump={true} />
      )}
      {localStorage.getItem('deviceType') && <Grid />}
    </>
  );
};

export default Page;
